<template><div>

    <HeaderNav></HeaderNav>
    <div class="pc-page">
    	<profileHeader></profileHeader>
    
	   	<div class="profile-main">

	   		<div class="profile-main-column">
	   			<div class="tabs">
	   				<ul class="tabs-list">
	   					<li class="tab-active"><a href="">收藏</a></li>
	   					<li><a href="">原创</a></li> 
	   				</ul>
	   			</div>
	   			<div class="profile-main-list">
	   				<ArticlePanel></ArticlePanel>
	   				<ArticlePanel></ArticlePanel>
	   				<ArticlePanel></ArticlePanel>
	   				<ArticlePanel></ArticlePanel>
	   			</div>
	   		</div>
	   		<div class="profile-activities">
	   			<panel></panel>
	   			<panel></panel>
	   		</div>

	   	</div>
   	</div>

   	<ArticleDetails></ArticleDetails>

</div></template>

<script> 
  import HeaderNav from '../components/Header-Nav.vue'; 
  import profileHeader from '../components/ProfileHeader.vue';
  import panel from '../components/Panel.vue';
  import ArticlePanel from '../components/ArticlePanel.vue';
  import ArticleDetails from '../components/ArticleDetails.vue';

  export default { 
  		data () {
  			return {

  			}
  		},
	    components: {
	        HeaderNav,
	        profileHeader,
	        panel,
	        ArticlePanel,
	        ArticleDetails
	    }
  }
</script>

<style scoped>
.pc-page {
	width: 1000px;
	margin:auto;
} 


.profile-main {
	width: 100%;  
	margin-top: 14px;
}

.profile-main:after {
	content: "";
	clear:both;
	height: 0px;
	display: block;
	visibility: hidden;
}

.profile-main-column { 
	width: 690px; 
	float: left;

	background: #fff;
    border: 1px solid #e7eaf1;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,37,55,.05);
    box-sizing: border-box; 
}

.profile-main-list {
	padding-left: 24px;
	padding-right : 24px;
}

.profile-activities {
	width: 296px;
	float: right;

}

.tabs { 
	box-sizing: border-box;
	height: 56px;
	width: 100%; 
	border-bottom: 1px solid #f0f2f7;
} 

.tabs-list {
	margin:0px;
	padding: 0px;
	padding-left: 4px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.tabs-list li {
	width: 72px;
	text-align: center;
	height: 54px;
	line-height: 56px;
	display: block;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center; 
} 

.tabs-list li a {
	display: block;
	width: 32px;
	height: 54px;
}

.tab-active a {
	font-weight: bold;
	height: 54px;
	border-bottom: 2px solid #0f88eb; 
}

</style>